<template>
<div class="bg">
  <h1>Login Page</h1>
  <div class="login_container">
    <div class="img_container">
      <img src="../assets/toux.jpg" alt="">
    </div>

    <el-form :rules="rules" ref="login_form" :model="login_form" label-width="80px" class="login-form">
      <el-form-item label="账号" prop="account">
        <el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="login_form.account"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="pwd">
        <el-input prefix-icon="el-icon-lock" show-password placeholder="请输入密码" v-model="login_form.pwd"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" round @click="subForm">登录</el-button>
        <el-button type="danger" icon="el-icon-delete" round @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>







<script>
export default {
  name: "Login",
  data() {
    //
    return {
      login_form: {
        account: '',
        pwd: '',
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          //{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // {min:6,massage:'密码至少包含6个字符',trigger:'change'},
          // {pattern:/[a-z]/,message:'密码必须包含小写字母',trigger:'change'},
          // {pattern:/[A-Z]/,message:'密码必须包含大写字母',trigger:'change'},
          // {pattern: /\d/,message:'密码至少包含一个数字',trigger:'change'},
          // {pattern: /[^A-Za-z0-9]/,message:'密码必须包含特殊符号',trigger:'change'}
        ]
      }
    };
  },
  methods: {
    // 登录校验
    subForm() {
      this.$refs.login_form.validate((valid) => {
        if (valid){
         // this.$message({
         //   message: '恭喜你，这是一条成功消息',
         //   type: 'success',
         //   duration: 1000
         // });
         this.userLogin();//调用用户登录的方法
        }else {
          this.$message({
            message: '请输入正确的账号和密码!',
            type: 'error',
            duration: 1000
          });
          return false;
        }
      });


      /*// 校验表单
      this.$refs.form.validate(async valid => {
        if (!valid) return;
        // 校验通过，提交登录请求
        const res = await this.$http.post('login', this.form);
        // 判断是否登录成功
        if (res.data.code === 200) {
          // 登录成功，提示用户
*/
        },
    // 用户登录
  async userLogin() {
    // 发送get请求
    // this.$axios.get("http://localhost:8087/user/userLogin",{
    //   params:{
    //     account:this.login_form.account,
    //     pwd:this.login_form.pwd
    //   }
    // } ).then(res=>{
    //   this.$message.success("登录成功")
    //   console.log(res);
    // }).catch(error=>{
    // this.$message.error("请求失败")
    // })
    // 发送post请求
    // this.$axios.post("http://localhost:8087/user/userLogin",this.login_form).then(res=>{
    //   if(res.data.success){
    //     this.$message.success("登录成功！！！")
    //   }else{
    //     this.$message.error("账号或密码错误,登陆失败！")
    //   }
    //
    // }).catch(error=>{
    //   this.$message.error("请求失败")
    // })
    let {data:res} = await this.$axios.post("http://localhost:8087/user/userLogin", this.login_form)
    // console.log(res)
    if (res.success) {
      // console.log(res.data.token)
      this.$message.success("登录成功！！！")
      // 先将token保存到localStorage中
     window.localStorage.setItem("token",res.data.token)
      // 保存用户信息
      window.sessionStorage.setItem("name",res.data.name)
      window.sessionStorage.setItem("icon",res.data.icon)
      // 再跳转页面
      await this.$router.push("/home")
    } else {
      this.$message.error("账号或密码错误,登陆失败！")
    }
  },

    resetForm() {
      // 重置表单
      this.$refs.login_form.resetFields();
    }

    }
}
</script>








<style scoped>
.bg{
  background: url("../assets/bg.jpeg")no-repeat fixed;
  background-size: 100% 100%;
  background-size: cover;
  height: 100%;
}
.login_container{
  width: 500px;
  height: 500px;
  background-color: rgba(255,255,255,.5);
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 150px;
  padding: 20px;
  box-shadow: 0 0 10px #000;
}
.img_container{
  width: 130px;
  height: 130px;
  background-color: rgba(255,255,255,.5);
  border-radius: 50%;
  padding: 20px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(241,231,231,0.192);
}
.img_container img{
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.5);
}
.login-form {
  display: flex; /* 将容器设置为flex布局 */
  flex-direction: column; /* 设置主轴为垂直方向 */
  justify-content: center; /* 在垂直方向上居中 */
  height: 65vh; /* 让表单在视口高度内居中 */
}

.login-form .input-box {
  margin: 200px 0; /* 为每个输入框添加一些上下间距 */
}

/*.login-form{
  display: flex; !* 使用flex布局 *!
  justify-content: center; !* 水平居中 *!
  align-items: center; !* 垂直居中 *!
  height: 100vh; !* 让表单在视口高度内居中 *!
}
.login-form .input-box {
  margin: 100px 0; !* 为每个输入框添加一些上下间距 *!
  width: 500px;
  height: 500px;
  background-color: #fff;
}*/
</style>